<!--
 * @Author: wuyang
 * @Description: 登录页
 * @Date: 2022-12-29 14:39:41
 * @LastEditors: wuyang
 * @LastEditTime: 2023-01-07 14:28:39
 * @FilePath: \vue3-graduate\src\views\login\index.vue
-->
<template>
  <div class="login-container">
    <svg-icon icon-class="login-bg" class="login-bg" />
    <el-row>
      <!-- 左侧插画部分 -->
      <el-col :span="12" class="flex items-center justify-end animated fadeInLeftBig">
        <svg-icon :icon-class="loginIcon" class="login-svg" @click="changeLoginBg" />
      </el-col>

      <!-- 右侧登录部分 -->
      <el-col :span="12" class="flex justify-center items-center">
        <div class="login-form flex flex-column items-center">
          <!-- logo -->
          <svg-icon icon-class="logo" :style="{ width: '100px', height: '100px' }" />

          <!-- 系统名 -->
          <h1 class="system-name">社团管理系统</h1>

          <!-- 登录表单 -->
          <el-form :model="loginForm" :rules="loginRules" status-icon ref="ruleFormRef" v-if="currentPage == 0">
            <Motion :delay="100">
              <!-- 账号 -->
              <el-form-item prop="username">
                <el-input v-model="loginForm.username" placeholder="账号" clearable>
                  <template #prefix>
                    <svg-icon icon-class="login-account" class="login-iconSize" />
                  </template>
                </el-input>
              </el-form-item>
            </Motion>
            <Motion :delay="150">
              <!-- 密码 -->
              <el-form-item prop="password">
                <el-input v-model="loginForm.password" placeholder="密码" type="password" clearable show-password>
                  <template #prefix>
                    <svg-icon icon-class="login-password" class="login-iconSize" />
                  </template>
                </el-input>
              </el-form-item>
            </Motion>

            <Motion :delay="200">
              <!-- 验证码 -->
              <el-form-item prop="captcha" class="captcha">
                <el-input v-model="loginForm.captcha" placeholder="验证码" clearable>
                  <template #prefix>
                    <svg-icon icon-class="login-captcha" class="login-iconSize" />
                  </template>
                </el-input>
                <!-- 4位验证码组件 -->
                <Captcha />
              </el-form-item>
            </Motion>

            <Motion :delay="250">
              <!-- 登录按钮部分 -->
              <el-form-item>
                <div class="flex items-center justify-between w-full">
                  <!-- <el-checkbox :model-value="remember">记住密码</el-checkbox> -->
                  <span class="forget" @click="useUserStoreHook().SET_CURRENTPAGE(2)">忘记密码？</span>
                </div>
                <el-button type="primary" @click="submitForm(ruleFormRef)" class="w-full footer-btn btn-green" >
                  登录
                </el-button>
                <el-button  @click="useUserStoreHook().SET_CURRENTPAGE(1)" class="w-full btn-white" :style="{ margin:0 }">
                  注册
                </el-button>
            </el-form-item>
          </Motion>

          <!-- 其他登录方式，暂时不做，等第二版在做 -->
          <!-- <Motion :delay="300">
              登录方式-按钮列表
              <el-form-item class="button-list">
                <el-button @click="useUserStoreHook().SET_CURRENTPAGE(3)">手机登录</el-button>
                <el-button @click="useUserStoreHook().SET_CURRENTPAGE(4)">二维码登录</el-button>
                <el-button @click="useUserStoreHook().SET_CURRENTPAGE(1)">注册</el-button>
              </el-form-item>
            </Motion>

            <Motion :delay="350">
              分割线
              <el-form-item class="button-list">
                <el-divider> 第三方登录 </el-divider>
              </el-form-item>
            </Motion>

            <Motion :delay="400">
              底部其他登录方式
              <el-form-item class="button-list">
                  <div class="flex justify-around items-center w-full">
                    <svg-icon icon-class="login-method1" class="icon-class" />
                    <svg-icon icon-class="login-method2" class="icon-class" />
                    <svg-icon icon-class="login-method3" class="icon-class" />
                    <svg-icon icon-class="login-method4" class="icon-class" />
                  </div>
                </el-form-item>
              </Motion> -->
          </el-form>

          <!-- 注册 -->
          <Register v-if="currentPage == 1" class="w-full" />
          <!-- 忘记密码 -->
          <Forget v-if="currentPage == 2" class="w-full" />
          <!-- 手机登录 -->
          <Phone v-if="currentPage == 3" class="w-full" />
          <!-- 二维码登录 -->
          <Qrcode v-if="currentPage == 4" class="w-full" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { reactive, ref, computed, onMounted, watch } from "vue";
// 登录验证规则
import { loginRules } from "./utils/rules";
import { ElButton, ElCheckbox, ElCol, ElDivider, ElForm, ElFormItem, ElInput, ElMessage, ElRow, FormInstance } from "element-plus";
// 引入 4位验证码组件
import Captcha from "./components/captcha.vue";
// 注册
import Register from "./components/register.vue";
// 忘记密码
import Forget from "./components/forget.vue";
// 手机登录
import Phone from "./components/phone.vue";
// 二维码登录
import Qrcode from "./components/qrcode.vue";
// useUserStoreHook
import { useUserStoreHook } from "@/store/modules/user";
// 过渡动画
import Motion from "./utils/motion";

import { useUserStore } from '@/store/modules/user'

let userStore = useUserStore()



onMounted(() => {
  loginForm.captcha = userStore.captcha
})
// 动态展示当前表单：0/1/2/3/4=> 注册/忘记密码/手机登录/二维码登录
const currentPage = computed(() => {
  return useUserStoreHook().currentPage;
});
// 获取路由
const router = useRouter();
// 表单数据
const loginForm = reactive({
  username: "",
  password: "",
  captcha: userStore.captcha,
});

// 是否记住密码
const remember = ref(false);
const ruleFormRef = ref<FormInstance>();

/**
 * 先验证表单填写，然后验证账号密码
 * 暂时实现最简单的路由跳转，后续对逻辑进行封装-----------------------------------------------------待修改
 */
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  const userStore = useUserStoreHook()
  await formEl.validate((valid) => {
    if (valid) {
      userStore
        .login({
          username: loginForm.username,
          password: loginForm.password,
        })
        .then((res: any) => {
          //TODO 登录后的操作
          
        })
        .catch((err: any) => {
          console.log(err)
        })
    } else {
      ElMessage({
        message: "请正确填写",
        type: "warning",
      });
    }
  });
};

// 切换首页插图
const loginCount = ref(1);
const loginIcon = ref("login-" + 1);
const changeLoginBg = () => {
  loginCount.value == 8 ? (loginCount.value = 1) : loginCount.value++;
  loginIcon.value = "login-" + loginCount.value;
};

</script>

<!-- 调整表单样式 -->
<style lang="scss">
@import "@/style/login.scss";
</style>
